<template>
  <div class="info-card">
    <div class="info-card-main">
      <span class="info-card-icon">👉</span>
      <span class="info-card-title">
        <b>点击 <span class="info-card-link" @click="props.onClick">这里</span> 完善信息</b>
      </span>
    </div>
    <div class="info-card-desc">
      {{ desc }}
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  desc: string
  onClick: () => void
}>()
</script>

<style scoped lang="scss">
.info-card {
  margin: 0 16px 24px 16px;
  padding: 28px;
  box-sizing: border-box;
  background: #f4faff;
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 rgba(120, 160, 220, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-height: 90px;
  .info-card-main {
    display: flex;
    align-items: center;
    font-size: 0;
    margin-bottom: 12px;
    width: 100%;
    .info-card-icon {
      font-size: 54px; // 原44px，调大
      margin-right: 22px; // 原18px，调大
      vertical-align: middle;
      line-height: 1;
      margin-top: -8px;
    }
    .info-card-title {
      font-size: 32px; // 原26px，调大
      font-weight: 900;
      color: #111;
      letter-spacing: 4px;
      line-height: 1.2;
      b {
        font-weight: 900;
      }
      .info-card-link {
        color: #2979ff;
        font-size: 36px; // 原28px，调大
        font-weight: 900;
        margin: 0 6px; // 原4px，调大
        letter-spacing: 2px;
      }
    }
  }
  .info-card-desc {
    font-size: 17px; // 原15px，调大
    color: #4a5a6a;
    background: #eaf3ff;
    border-radius: 16px;
    padding: 9px 22px; // 原7px 18px，调大
    margin-left: 72px; // 原62px，调大
    margin-top: 0;
    display: inline-block;
    font-weight: 400;
    letter-spacing: 1px;
  }
}
</style> 